<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>

    <style>
        canvas {
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>

<body>
<canvas id="cont" width="500px" height="500px">浏览器不支持</canvas>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 固定start获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')
    // 固定end

    // 画直线
    ctx.beginPath()
    ctx.moveTo(250, 0)
    ctx.lineTo(250, 500)
    ctx.stroke()
    //ctx.closePath()

    ctx.beginPath()
    ctx.moveTo(0, 250)
    ctx.lineTo(500, 250)
    ctx.stroke()

    // 文字属性,上下左右居中
    ctx.font = '40px 微软雅黑'
    //ctx.textAlign = 'end'
    // "center" | "end" | "left" | "right" | "start";
    ctx.textAlign = 'center'
    //ctx.textAlign = 'left'
    // ctx.textAlign = 'right'
    // "alphabetic" | "bottom" | "hanging" | "ideographic" | "middle" | "top";
    ctx.textBaseline = 'middle'
    ctx.fillText("HTML", 250, 250)

</script>
</body>
</html>
